<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button type="button" id="reset">重新开始一局游戏</button>
    <br>

    请输入要猜的数字:<input type="text" id="number">
    <button type="button" id="button">猜</button>
    <br>
    已经猜的次数:<span id="count">0</span>
    <br>
    结果:<span id="result"></span>
    <script>
        //1.获取需要用到的元素
        let inputE = document.querySelector("#number");
        let countE = document.querySelector("#count");
        let resultE = document.querySelector("#result");
        let btn = document.querySelector("#button");
        let resetBtn = document.querySelector("#reset");
        // 2.随机生成一个 1-100 的数字
        let guessNumber = Math.floor(Math.random() * 100) + 1// 0 - 1 之间的数

        // 3.更新猜的次数
        let count = 0;//记录猜的次数

        btn.onclick = function () {
            count++;
            countE.innerText = count;

            let userGuess = parseInt(inputE.value);//将输入框中的字符串转换成整数
            //4.对比过程
            if (userGuess == guessNumber) {
                resultE.innerText = "猜对了";
                resultE.style = "color: green;";
            } else if (userGuess < guessNumber) {
                resultE.innerText = "猜小了";
                resultE.style = "color: blue;";
            } else {
                resultE.innerText = "猜大了";
                resultE.style = "color: red;";
            }
        };
        //5.实现重新开始一句游戏
        resetBtn.onclick = function () {
            //清空方法一

            location.reload();
        }
    </script>


    <h1><a href="calculator.html">计算器</a></h1>
</body>

</html>